import React from "react";
import { Form, Input, Button, Switch } from "antd";
import { useNavigate } from "react-router-dom";
import "./login.less";
// import { setToken } from "@/utils";
import LoginLogo from "@/assets/login-logo.svg";
import { loginService } from "./../../services/login";
import { encrypt } from "@/utils/secret";
import { useDispatch } from "react-redux";
import { setToken } from "@/store/userSlice";

interface LoginForm {
  username: string;
  password: string;
}
export default () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();

  const submit = async (values: LoginForm) => {
    console.log(values);
    try {
      // 调接口 登录 保存token
      const { data } = await loginService({
        ...values,
        password: encrypt(values.password),
        type: "pwd",
        autoLogin: false,
      });
      console.log(data, "data===");
      // setToken(data?.authCode);
      dispatch(setToken({ token: data?.authCode, isLogin: true }));
      navigate("/");
    } catch (error) {}
  };

  return (
    <div className="login-container">
      <div className="login-container-left">
        <div className="login-container-left-header">
          <img style={{ marginRight: "12px" }} src={LoginLogo} />
          海纳产品管控中心
        </div>
        <div className="login-container-left-form">
          <div className="login-container-left-form-card">
            <p style={{ fontSize: "24px", paddingBottom: "40px", margin: 0 }}>
              账号密码登录
            </p>
            <Form onFinish={submit}>
              <Form.Item
                name="username"
                rules={[{ required: true, message: "请输入用户名" }]}
              >
                <Input placeholder="Username" />
              </Form.Item>
              <Form.Item
                name="password"
                rules={[{ required: true, message: "请输入密码" }]}
              >
                <Input type="password" placeholder="Password" />
              </Form.Item>

              <Form.Item>
                <Button
                  style={{ width: "100%", height: "44px" }}
                  type="primary"
                  htmlType="submit"
                  className="login-form-button"
                >
                  登录
                </Button>
              </Form.Item>
              <div>
                <Switch size="small" /> 自动登录
              </div>
            </Form>
          </div>
        </div>
        <div className="login-container-left-footer">
          Copyright2023湖南科创信息技术股份有限公司
        </div>
      </div>
      <div className="login-container-right"></div>
    </div>
  );
};
